<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      实力上的数据：{{ info }}
      <my-component></my-component>
      <custome-component></custome-component>
    </div>

    <script src="./vue开发版.js"></script>
    <script>
      /*
		组件概念性问题
		1.什么是组件？
		  是页面中可复用的局部功能界面；

		2.组件化开发的好处
		  协同开发
		  可以复用
		  可维护性

		3.组件的组成部分
		  html结构  css样式  数据  逻辑

		4.创建组件
		  3.1全局注册
		  		Vue.component('组件名称',{
					  关于组件的配置
				  })
		  组件名称的命名：两种方法  驼峰命名aaaBbb   烤串命名a-b-c   pascal命名
		  
		  3.2局部注册
			   在components配置项里面写
			   components:{
				   '组件名称':{
					   组件的配置
				   }
			   }

		5.组件的使用：
			把组件名称当做一个自定义的元素放在想放的位置

		6.关于组件中data的问题
			组件的data必须是一个函数,每一个组件都有自己可以维护的数据，当修改一个组件的数据，其他都会跟着修改

		7.组件上的this指向的是当前组件，在组件上声明的方法和属性都挂载到当前组件上	
		
		*/
      Vue.component('my-component', {
        //定义组件模板
        template: `
				<div>
					<h2>我是组件</h2>
					组件上的：{{msg}}
					<button @click="show">弹出</button>
				</div>
			`,
        data() {
          //定义组件数据
          return {
            msg: '哈哈😄'
          };
        },
        computed: {},
        watch: {},
        methods: {
          //定义组件方法
          show() {
            console.log(this);
            // alert('123');
          }
        }
      });

      var vm = new Vue({
        el: '#app',
        data: {
          info: '你好'
        },
        components: {
          'custome-component': {
            //定义组件模版
            template: `
						<div>
						<h3>我是局部注册的组件</h3>
						{{msg1}}
						<child-component></child-component>
						</div>
				`,
            data() {
              return {
                msg1: '我是局部注册的组件®️'
              };
            },
			components:{
				'child-component':{
					template:`
						<div>
						<h1>我是局部的子组件</h1>
						</div>
					`
				}
			}
          }
        }
      });
    </script>
  </body>
</html>
